<template>
  <div class="top-middle-cmp">
    <div class="top-middle-background-layer" :style='{"background-image": backgroundUrl, "background-position": "center center", "opacity": "0.2", "background-size": "contain"}'></div>
    <div class="chart-name">
      <div class="chart-name-title" style="font-size: 14px;">{{title}}</div>
      <div class="chart-name-title-right">
        <dv-decoration-3 style="width:100px;height:20px;" />
        <template v-if="subTitle">
          <div class="title-right-cirle"></div>
          <div class="title-right-name">{{subTitle}}</div>
        </template>
      </div>
    </div>
    <div class="chart-main" ref="myChartRef"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'PillarLineEchartsCmp',
  props:["title", "config", "backgroundUrl", "subTitle"],
  data () {
    return {
      myChart0: null,
    }
  },
  mounted() {
    var that = this;
    this.$nextTick(() => {
        
      that.initCharts();

    })
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resize0);

    this.myChart0 && this.myChart0.dispose();
  },
  methods: {
    initCharts(){
      this.myChart0 = echarts.init(this.$refs.myChartRef);
      
      this.myChart0.setOption(this._props.config);
      window.addEventListener('resize', this.resize0);
    },
    resize0() {
      if(this.myChart0) {
        this.$nextTick(() => {
          this.myChart0.resize();

        });
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.top-middle-cmp {
  width: 100%;
  height: 100%;
  position: relative;
  // padding: 10px;
  box-sizing: border-box;
  background: rgba($color: #005ABF, $alpha: 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .top-middle-background-layer {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .chart-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px 0 10px;

    .chart-name-title {
      font-weight: bold;
      font-size: .2rem;
    }

    .chart-name-title-right {
      margin: 0 6px;
      display: flex;
      justify-content: center;
      align-items: center;

      .title-right-cirle {
        width: .2rem;
        height: .2rem;
        border-radius: .2rem;
        background-color: #f5d94e;
        margin: 0 8px;
      }

      .chart-name-title {
        color: #f5d94e;
        font-size: .2rem;
      }
    }
  }

  .chart-main {
    flex: 1;
    padding: 0 10px;
    
  }
}
</style>
